<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #canvas {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    </style>
  </head>
  <body>
    <canvas
      id="canvas"
      height="600"
      width="800"
      style="border: 1px solid #ccc"
    ></canvas>
    <script>
      let canvas = document.querySelector("#canvas");
      let cxt = canvas.getContext("2d");

      function setClock() {
        // 清楚
        cxt.clearRect(0,0,800,600)
        // 保留状态
        cxt.save();
        // 将坐标移动到画布中央
        cxt.translate(400, 300);
        cxt.rotate((-2 * Math.PI) / 4);

        cxt.save();
        // 绘制表盘
        cxt.beginPath();
        cxt.arc(0, 0, 200, 0, 2 * Math.PI);
        cxt.lineWidth = 10;
        cxt.strokeStyle = "grey";
        cxt.stroke();
        cxt.closePath();

        //   绘制分针刻度
        cxt.save();
        for (let j = 0; j < 60; j++) {
          cxt.rotate(Math.PI / 30);
          cxt.beginPath();
          cxt.moveTo(185, 0);
          cxt.lineTo(200, 0);
          cxt.strokeStyle = "orange";
          cxt.lineWidth = 2;
          cxt.stroke();
          cxt.closePath();
        }
        cxt.restore();

        // 绘制时针刻度
        for (let i = 0; i < 12; i++) {
          cxt.rotate(Math.PI / 6);
          cxt.beginPath();
          cxt.moveTo(180, 0);
          cxt.lineTo(200, 0);
          cxt.stroke();
          cxt.strokeStyle = "grey";
          cxt.closePath();
        }
        cxt.restore();

        //   获取时间
        cxt.save();
        let time = new Date();
        let hour = time.getHours();
        let min = time.getMinutes();
        let sec = time.getSeconds();
        // 如果时间大于12 直接减去12
        hour = hour > 12 ? hour - 12 : hour;
        console.log(hour + ":" + min + ":" + sec);

        // 绘制秒针
        cxt.beginPath();
        // 根据秒针的时间进行旋转
        cxt.rotate(((2 * Math.PI) / 60) * sec);
        cxt.moveTo(170, 0);
        cxt.lineTo(-20, 0);
        cxt.strokeStyle = "red";
        cxt.lineWidth = 2;
        cxt.stroke();
        cxt.closePath();

        cxt.restore();
        cxt.save();

        //   绘制分针
        cxt.beginPath();
        // 根据分针的时间进行旋转
        cxt.rotate(((2 * Math.PI) / 60) * min + ((2 * Math.PI) / 3600) * sec);
        cxt.moveTo(120, 0);
        cxt.lineTo(-20, 0);
        cxt.strokeStyle = "darkblue";
        cxt.lineWidth = 3;
        cxt.stroke();
        cxt.closePath();
        cxt.restore();

        //   绘制时针
        cxt.save();
        // 根据时针的时间进行旋转
        cxt.rotate(
          ((2 * Math.PI) / 12) * hour +
            ((2 * Math.PI) / 60 / 12) * min +
            ((2 * Math.PI) / 12 / 60 / 60) * sec
        );
        cxt.beginPath();
        cxt.moveTo(90, 0);
        cxt.lineTo(-20, 0);
        cxt.lineWidth = 5;
        cxt.stroke();
        cxt.closePath();
        cxt.restore();
        cxt.restore();
      }

      setInterval(() => {
        setClock();
      }, 1000);
    </script>
  </body>
</html>
